var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var slider = document.getElementById('scale-range');
var image = new Image();
var isMouseDown = false;
var scale;

var watermarkCanvas = document.getElementById('watermark-canvas');
var watermarkContext = watermarkCanvas.getContext('2d');

var offCanvas = document.getElementById('offCanvas');
var offContext = offCanvas.getContext('2d');

window.onload = function() {
    canvas.width  = 1152;
    canvas.height = 768;
    // context.fillStyle = 'red';
    // context.fillRect(100, 100, 400, 400);
    image.src = 'img-lg.jpg';
    image.onload = function() {
        offCanvas.width = image.width;
        offCanvas.height = image.height;
        scale = offCanvas.width / canvas.width;
        console.log('scale', scale);
        offContext.drawImage(image, 0, 0, offCanvas.width, offCanvas.height);
        // var scale = slider.value;
        // drawImageByScale(scale, canvas, context, image, watermarkCanvas);
        // slider.onmousemove = function(e) {
        //     var scale = e.target.value;
        //     drawImageByScale(scale, canvas, context, image, watermarkCanvas);
        //     console.log(e.target.value);
        // }
        // context.drawImage(image, 0, 0, canvas.width, canvas.height);
    }

    //step water mark
    watermarkCanvas.width = 500;
    watermarkCanvas.height = 100;

    watermarkContext.font = "bold 50px Arial";
    // watermarkContext.lineWidth = "1";
    watermarkContext.fillStyle = "rgba(255, 255, 255, 0.5)";
    watermarkContext.textBaseline = "middle";
    watermarkContext.fillText("== zhangzhiyuan ==", 20, 50);


    canvas.onmousedown = function(e) {
        e.preventDefault();
        isMouseDown = true;
        var point = windowToCanvas(e.clientX, e.clientY, canvas);
        drawCanvasWithMagnifier(true, point);
        // console.log(point);
    }

    canvas.onmousemove = function(e) {
        e.preventDefault();
        if(isMouseDown) {
            var point = windowToCanvas(e.clientX, e.clientY, canvas);
            drawCanvasWithMagnifier(true, point);
            // console.log(point);
        }

    }

    canvas.onmouseup = function(e) {
        e.preventDefault();
        isMouseDown = false;
        var point = windowToCanvas(e.clientX, e.clientY, canvas);
        drawCanvasWithMagnifier(false);
        // console.log(point);
    }

    canvas.onmouseout = function(e) {
        e.preventDefault();
        isMouseDown = false;
        var point = windowToCanvas(e.clientX, e.clientY, canvas);
        drawCanvasWithMagnifier(false);
        // console.log(point);
    }

    function windowToCanvas(x, y, canvas) {
        var bbox = canvas.getBoundingClientRect();
        return {x: x - bbox.left, y: y - bbox.top}
    }

}

function drawImageByScale(scale, canvas, context, image, watermarkCanvas) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    var imageWidth = canvas.width * scale;
    var imageHeight = canvas.height * scale;
    var dx = (canvas.width - imageWidth)/2;
    var dy = (canvas.height - imageHeight)/2;
    context.drawImage(image, dx, dy, imageWidth, imageHeight);
    context.drawImage(watermarkCanvas, canvas.width - watermarkCanvas.width, canvas.height - watermarkCanvas.height)
}
function drawCanvasWithMagnifier(isShowMagnifier, point) {
    // console.log('draw magnifier');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
    if(isShowMagnifier) {
        drawMagnifier(point);
    }
}
function drawMagnifier(point) {
    var imageLG_cx = point.x * scale;
    var imageLG_cy = point.y * scale;
    var mr = 200;
    console.log('draw magnifier', point.x, point.y, scale);
    var sx = imageLG_cx - mr;
    var sy = imageLG_cy - mr;

    var dx = point.x - mr;
    var dy = point.y - mr;

    context.save();
    context.lineWidth = 1.0;
    context.strokeStyle = "#069";
    context.beginPath();
    context.arc(point.x, point.y, mr, 0, Math.PI * 2);
    context.stroke();
    context.clip();

    console.log('params', sx, sy, 2*mr, 2*mr, dx, dy, 2*mr, 2*mr);

    context.drawImage(offCanvas, sx, sy, 2*mr, 2*mr, dx, dy, 2*mr, 2*mr);
    context.restore();
}
console.log(context);